<template>
    <dd-flex gap="1em">
        <dd-drawer v-model:visible="visibleLeft">left</dd-drawer>
        <dd-button @click="visibleLeft = true">left</dd-button>

        <dd-drawer v-model:visible="visibleRight" from="right">right</dd-drawer>
        <dd-button @click="visibleRight = true">right</dd-button>

        <dd-drawer v-model:visible="visibleTop" from="top">top</dd-drawer>
        <dd-button @click="visibleTop = true">top</dd-button>

        <dd-drawer v-model:visible="visibleBottom" from="bottom">bottom</dd-drawer>
        <dd-button @click="visibleBottom = true">bottom</dd-button>
    </dd-flex>
</template>
<script setup lang="ts">
import { ref } from "vue";

const visibleRight = ref(false);
const visibleTop = ref(false);
const visibleLeft = ref(false);
const visibleBottom = ref(false);
</script>
